<template>
  <el-table-column
      v-if="col.children && col.children.length>0"
      :label="col.label"
      :align="alignType"
      :width="col.width || ''"
  >
    <ColumnItem
        v-for="item in col.children"
        :key="item.id"
        :col="item"
    ></ColumnItem>
  </el-table-column>

  <el-table-column
      v-else
      :prop="col.field"
      :label="col.label"
      :align="alignType"
      :width="col.width || ''"
  >
    <template #default="scope">

      <!--输入框-->
      <el-form-item label=""
                    :prop="`${scope.$index}.${col.field}`"
                    :rules="col.rules">
        <div style="width: 100%; text-align: center;">
          <!--文本输入框-->
          <el-input
              v-if="col.inputType == 'string'"
              v-model="scope.row[col.field]"
              :disabled="scope.row.disabled"
          />
          <!--数字输入框-->
          <el-input-number
              v-else-if="col.inputType == 'number'"
              v-model="scope.row[col.field]"
              :precision="col.precision"
              :step="col.step"
              :max="col.max"
              :disabled="scope.row.disabled"
          />
          <el-input
              v-else-if="col.inputType == 'inputWithBtn'"
              v-model="scope.row[col.field]"
              placeholder="请选择..."
              class="input-with-select"
              readonly
          >
            <template #append>
              <el-button icon="Search" @click="col.searchValue(scope.$index, scope.row)"/>
            </template>
          </el-input>

          <!--下拉框-->
          <el-select
              v-else-if="col.inputType == 'select'"
              v-model="scope.row[col.field]"
              :disabled="scope.row.disabled"
          >
            <el-option
                v-for="item in col.selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <!--日期<年>-->
          <el-date-picker
              v-else-if="col.inputType == 'year'"
              v-model="scope.row[col.field]"
              :editable="false"
              type="year"
              format="YYYY年"
              value-format="YYYY"
              placeholder=""
              size="default"
          />
          <!--日期<月>-->
          <el-date-picker
              v-else-if="col.inputType == 'month'"
              v-model="scope.row[col.field]"
              :editable="false"
              type="month"
              format="MM月"
              value-format="MM"
              placeholder=""
              size="default"
          />
          <!--日期<年-月>-->
          <el-date-picker
              v-else-if="col.inputType == 'yearMonth'"
              v-model="scope.row[col.field]"
              :editable="false"
              type="month"
              format="YYYY-MM"
              value-format="YYYY-MM"
              placeholder=""
              size="default"
          />
          <!--日期<年-月-日>-->
          <el-date-picker
              v-else-if="col.inputType == 'yearMonthDay'"
              v-model="scope.row[col.field]"
              :editable="false"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder=""
              size="default"
          />
          <!--日期<年-月-日 时:分:秒>-->
          <el-date-picker
              v-else-if="col.inputType == 'datetime'"
              v-model="scope.row[col.field]"
              :editable="false"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder=""
              size="default"
          />
          <!--图片-->
          <el-image
              v-else-if="col.inputType == 'image'"
              style="width: 70px; height: 70px"
              :src="scope.row[col.field]"
              :preview-src-list="[scope.row[col.field]]"
              :preview-teleported="true"
              :z-index="100"
              alt="/"
              fit="fill"
          >
            <template #error>
              <div style="width: 100%; height: 100%; display: flex;
            justify-content: center; align-items: center">
                <p>加载失败</p>
              </div>
            </template>
          </el-image>
          <!--级联选择-->
          <el-cascader
              v-else-if="col.inputType == 'cascader'"
              v-model="scope.row[col.field]"
              :options="col.casOptions"
              :props="col.casProps"
              :collapse-tags="col.casCollapse"
          />
          <el-input
              v-else-if="col.inputType == 'computed'"
              :value="col.getValue(scope.$index, scope.row)"
              disabled
          />
          <template v-else>{{ scope.row[col.field] }}</template>
        </div>
      </el-form-item>

    </template>
  </el-table-column>
</template>

<script lang="ts" setup name="ColumnItem">
import {} from 'vue'
import {dayjs} from "element-plus";

let props = defineProps({
  col: {
    type: Object,
    default: () => {
      return {}
    }
  },
  //判断单元格文字是居中还是左对齐显示
  alignType: {
    type: String,
    default: "center", //默认居左
  },
});
// let emits = defineEmits<{
//   (event: 'changeAmount', row): void
// }>();
//
// let changeAmount = (row, field: string) => {
//   emits('changeAmount', row)
// }
</script>

<style scoped lang='less'>
.el-form-item {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
</style>
